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The IFrames Lowdown 



by Zach Waller 
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OK. Let's talk frames,... No, wait! Where are you going/ come back! Perhaps I should've been a little 
more subtle. Chatted about the weather, or maybe the Green Bay Packers. 

Instead, I came right out and used the "f" word. I understand your reluctance. Everybody, it seems, 
is sick of frames. But if frames are an illness, then I just might have the cure. (And no, I don't mean 
turning off the computer so you can get a life. You just sit back and let me finish.) 

"So," I say, "I've got these killer frames...." 

"Sure, whatever," you reply. 

I look at you coyly. "But these frames, man ... these frames, they float." 
Intrigued, you turn around and smile. "They float, huh? Tell me more." 

And I will. But first, for those who came in late: There's a possibility that you missed Jill Atkinson's 
treatise on frames — their structure, usage, and relation to the four food groups. I don't know, 
maybe you were sick that day, had to take the dog to the vet, whatever. Point being, you might be 
unaware of how frames work. So for those of you thus afflicted, I'd recommend that you take a peek 
at Jill's piece, and I'll also tell you this: Frames are used to "separate, contain, and present" content. 

Everyone up to speed? Let's go. 

Frames, when used sensibly, can be a great tool for presenting a complex site. Unfortunately, they've 
always been sort of boxy and constraining, doomed as they are to dwell in and along the corners of a 
browser. But all that changed with the introduction of the inline frame, or iframe for short. 

The iframe made its debut way back when Microsoft released Internet Explorer 3.0. For a while, they 
only existed on Intranets and Microsoft-optimized sites. Now that they are fully supported by all 
subsequent Microsoft browsers, Netscape 6, and Opera 5 (to name the biggies), iframes are ready for 
the real world. 

What's so special about iframes again? Ah, yes, the floating thing. An iframe isn't bound to the side of 
a browser window. No way. Just like an image, a floating frame can sit anywhere on the page. It goes 
where it wants to go and calls in what it wants to call in. In every sense, a liberated frame for the 
new millennium. 

Think of your website as a stack of magazines. Although it's interesting to look at, and no doubt 
chock-full of hard-hitting, compelling content, some people will never know this because all they see 
is what's at the very top. The only way for users to get at the rest of the content is to dig into the 
stack one page at a time. 

Now imagine if you could give your viewers a magic mirror like the one Miss Cindy had on Romper 
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Room — you know, the one sh^Wsed to see you through the TV? Wel^With this mirror, your readers 
could see what's in the center of the pile, um, I mean your website. No more clicking and reloading, 
and clicking and reloading, and clicking and reloading to dredge up information. So you see, floating 
frames are magic — just like Miss Cindy's mirror. 

OK, not magic, exactly. Let's look at how they really work. 

Look Ma, They Float 

You may remember that in normal frames pages, the <frameset> </frameset> tags define how the page 
should be divided. These tags replace or precede the <body> tag, and look something like this (each "?» 
would define the size and number of columns): 

<frameset 0015="?, ?"> 

Then the <frame> tag is used to describe each frame and pull in the HTML source document. It looks 
something like this: 

<frame src= 11 blah. html" name="blah" > 

Now, iframes are obviously a little different than your run-of-the-mill frame. First of all, they're 
defined entirely by the <iframe> tag, which fulfills the functions of both the <frame> and <frameset> tags. 
Second, the <iframe> tag can be placed directly inside the <body> </bod y > tags, like an image. (In fact, 
the <body> tag can define some iframe attributes, but I'll get to that later.) 

Let's start off by defining the size of your iframe. The <iframe> tag can define the width and height 
using pixel values: 

<iframe width=150 height=200> </iframe> 

Or percentages: 

<iframe width=40% height=%60> </iframe> 

Keep in mind that percentages will scale to accommodate the space available on the user's monitor, 
while pixels are more restrictive and less responsive to the individual needs of a user. What f s perfect 
on a laptop screen may be far too small for a 21-inch workstation monitor, and vice versa. 

Also, note that I've added the </iframe> tag after every <iframe>. This is necessary because it closes the 
floating frame. 

Looks like to me like we're off to a good start. But as my grandma used to tell me, "Son, if you ain't 
got content, you ain't got diddly." Never being a fan of diddly, that never really bothered me. But in 
retrospect, the old girl had a point. Without content, you kinda just got yourself a blank page. 

So next we'll learn how to give the iframe some guts. 
Loading and Positioning Content 

Lucky for us, the <iframe> tag behaves just how we need it to — by assigning an HTML source 
document, we can fill the floating frame with whatever we deem proper. An iframe loads an HTML 
document onto the page the same way one would call up an image. It works like this: 

<iframe width=150 height=200 src="blah.html " > </iframe> 

Our floating frame will now display whatever's included in biah.htmi. 
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< Right about now, you're probacy asking yourself, "Yeah, that's nice, Wrc how in the heck do I 'float 1 
the darn thing into the position I want?" Good question. After all, things that "float" aren't usually all 
that stable. 

Well, again, we need to think of the <iframe> tag in terms of the <im g > tag. A floating frame will show 
up wherever you place it in the content of the page: If you stick the tag halfway down your HTML 
document, the iframe will show up halfway down your Web page. Unlike regular frames, floating 
frames aren't persistent. They will scroll up and down (and off) the page, just like the rest of the 
content. 

If you want your frame to line up against either side of the browser window, you just need to place 

an align=left Or align=right Within the <iframe> tag, like SO: 

<iframe width=150 height=200 src= "blah . html " align=left> </iframe> 

Now we have an inline frame that's 150 pixels wide, 200 pixels tall, and aligned left. 

Of course, if you want to actually float the frame above other elements within the page, you could 
use absolute positioning, a floating <div> layer, and stylesheet declarations to put the content 
anywhere you desire. That's the beauty of iframes and dHTML — remember that your iframe content 
is served inline, just like an image. 

Using layers, your basic code looks like this: 

<div id="f loat frame " > 

<iframe width=150 height=200 src= "blah . html " align=left> </iframe> 
</div> 

And your CSS positioning code looks like this: 

<style type="text/css"> 
tffloatframe {position :absolute; 

left: 200px; 

top : 200px; 

width: 150px; 

height : 200px; 

z-index: 100 

} 

</style> 

Here's an example where I've used absolute positioning to float an iframe over a picture. Feel free to, 
study and admire it. 

If all this stylesheet nonsense is new to you, you should read Taylors excellent dHTML Tutorial . It 
covers stylesheets, scripting, layers, navigation elements, legos — the whole shebang. 

Once you're familiar with the basics, you're ready to tackle the frameborder and various margin 
attributes. 

Defining Borders and Margins 

Floating frames have borders by default — meaning, if you don't instruct the browser to do otherwise, 
it will place a border around your frame. But you can alter border thickness by invoking the almighty 
frameborder attribute, which is defined in terms of pixels. 
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<iframe width=150 height =2 oHrc= n blah . html " align=left f rameborder= 10 frame > 

So this floating frame would have a border 10 pixels thick. But if you set the frameborder to, say, 
zero, your frame border becomes virtually invisible. 

<iframe width=150 height=200 src="blah .html" align=left f rameborder=0> </iframe> 

Think about that for a minute. If you have a frame with an invisible border smack dab in the middle 
of your content, how can you tell the difference between the content outside the frame and the 
content inside the frame? The answer is: You can't. 

Unless you want to alienate your users or create an digital art installation liberated from all sensible 
convention, you need to find some way of addressing this problem. One way to differentiate the 
iframe content is to use smart design techniques. For example, a slightly different background color 
in your biah.htmi document will make the iframe stand out from the rest of the page. Or you could try 
using a different font color or size. You can also set the content apart by surrounding it with a distinct 
margin. 

There are two kinds of margins you can set. The external margin is the space that surrounds the 
frame. It's set using the hspace and vspace attributes, which set the horizontal (left/right) and vertical 
(top/bottom) margins, respectively: 

<iframe width=150 height=200 src= "blah . html " align=left f rameborder=10 hspace=10 vspace=10> </iframe> 

Internal margins are quite different because they're set, oddly enough, in the <body> tag of your 
document. Using the topmargin and the lef tmargin attributes of the <body> tag, you can offset the internal 
margin of your frame window, like so: 

<body topmargin=10 lef tmargin=5> 

Starting from the top left, your document's content will now sit ten pixels down and five pixels over 
from the corner of the frame. Even if you don't plan to offset the internal margins, it's a good idea to 
define these attributes in the <bod y > tag anyway. You can do this by setting both values to zero. If you 
find your content is too long to fit comfortably within your frame, you can summon a scrollbar: 

<iframe width=150 height=200 src= M blah . html " align=left f rameborder=10 hspace=10 vspace=10 scrolling=yes> 
</if rame> 

Of course, you can also turn off the scrollbar (by setting it to scroiiing=no) or just let the browser 
decide for itself when the scrollbar is necessary (by setting it to scromng=auto). 

Now all you have to do is name the elements and make the thing actually work. 

I Think I'll Name it Fred 

Targeting within the <iframe> tag works exactly like it would in a typical <frame> tag (see Jill's column 
on naming and targeting for a fuller explanation). In order to send a new page to the floating frame 
window, you have to give your frame a name: 

<iframe width=150 height=200 src="blah.html" align=left f rameborder=10 hspace=10 vspace=10 name=*"f red"> 
</if rame> 

Now that your frame has a name, you can address (or target) it whenever you want to send it new 
content. So you can place a link on your page that looks like this: 

<a href =" yackitysmackity.html" target="f red" >Gimme! </a> 

When you follow that link, it will send the contents of yackitysmackity.html to your floating iframe 
named fred. 
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- So now you've got a really codnToating iframe that you can see with IWor higher, Netscape 6, or 
various other recently released browsers. But what do people with older browsers see? Not much. 

Older versions of Netscape Navigator don't recognize the <iframe> tag. In fact, release 4.7 completely 
ignores it. So how can you get the most out of your documents while still maintaining backwards 
compatibility? 

Well, the other iframe tutorials I've seen suggest you include a <frame> tag between <iframe> and 
</irrame> tags. Like this: 

<iframe width=150 height=200 src="blahblah . html " > 
< frame src="blahblah . html" > 



But I'm more than a little bit skeptical about this solution since I've yet to see it work on every single 
browser out there. Some would say that you're better off taking a chance and presenting your 
content in iframes anyway. After all, people need the incentive to upgrade their browsers, right? Of 
course, the smart thing to do would be to set up a server-side browser detection script that serves 
pages with iframes to the newer browsers and boring vanilla pages to the older browsers. 

The choice, as always, is yours. 



Zach Waller is a former Wired Digital product manager. Sometimes he cuts little happy faces out of American 
cheese and sticks them to his monitor. 
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OK. Let's talk frames.... No, wait! Where are you going? Come 
back! Perhaps I should've been a little more subtle. Chatted 
about the weather, or maybe the Green Bay Packers. 

Instead, I came right out and used the "f" word. I understand 
your reluctance. Everybody, it seems, is sick of frames. But if 
frames are an illness, then I just might have the cure. (And no, 
I don't mean turning off the computer so you can get a life. 
You just sit back and let me finish.) 

"So," I say, "I've got these killer frames...." 

"Sure, whatever," you reply. 

I look at you coyly. "But these frames, man ... these frames, 
they float." 

Intrigued, you turn around and smile. "They float, huh? Tell me 
more." 



WINNER! 
WINNER! 
WINNER! 



YOU 
JUST 
WON 
A 



DIGITAL 
CAMERA 



And I will. But first, for those who came in iate: There's a 

possibility that you missed Jill Atkinson's treatise on frames — 

their structure, usage, and relation to the four food groups. I Click Here 

don't know, maybe you were sick that day, had to take the dog 

to the vet, whatever. Point being, you might be unaware of 

how frames work. So for those of you thus afflicted, I'd 

recommend that you take a peek at Jill's piece, and I'll also tell 

you this: Frames are used to "separate, contain, and present" 

content. 
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Everyone up to speed? Let's go. 

Frames, when used sensibly, can be a great tool for presenting 
a complex site. Unfortunately, they've always been sort of boxy 
and constraining, doomed as they are to dwell in and along the 
corners of a browser. But all that changed with the introduction 
of the inline frame, or iframe for short. 

The iframe made its debut way back when Microsoft released 
Internet Explorer 3.0. For a while, they only existed on 
Intranets and Microsoft-optimized sites. Now that they are fully 
supported by all subsequent Microsoft browsers, Netscape 6, 
and Opera 5 (to name the biggies), iframes are ready for the 
real world. 

What's so special about iframes again? Ah, yes, the floating 
thing. An iframe isn't bound to the side of a browser window. 
No way. Just like an image, a floating frame can sit anywhere 
on the page. It goes where it wants to go and calls in what it 
wants to call in. In every sense, a liberated frame for the new 
millennium. 

Think of your website as a stack of magazines. Although it's 
interesting to look at, and no doubt chock-full of hard-hitting, 
compelling content, some people will never know this because 
all they see is what's at the very top. The only way for users to 
get at the rest of the content is to dig into the stack one page 
at a time. 

Now imagine if you could give your viewers a magic mirror like 
the one Miss Cindy had on Romper Room — you know, the one 
she used to see you through the TV? Well, with this mirror, 
your readers could see what ! s in the center of the pile, um, I 
mean your website. No more clicking and reloading, and 
clicking and reloading, and clicking and reloading to dredge up 
information. So you see, floating frames are magic — just like 
Miss Cindy's mirror. 



OK, not magic, exactly. Lets look at how they really work. 
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